<template>
  <section>
    <el-row id="listTop">
      <el-col :span="24" class="toolbar">
        <el-form :inline="true" :model="state.filters">
          <el-form-item>
            <el-input v-model="state.filters.roleName" placeholder="角色名" />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              :loading="state.listLoading"
              @click="handleCurrentChange(1)"
            ><el-icon> <Search /> </el-icon>查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              :loading="state.listLoading"
              @click="handleCreate()"
            ><el-icon> <Plus /> </el-icon>新增</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="toolbar">
        <el-pagination
          v-model:current-page="state.page"
          v-model:page-size="state.pageSize"
          background
          layout="total, prev, pager, next, jumper"
          :total="state.total"
          @current-change="handleCurrentChange"
        />
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table
          v-loading="state.listLoading"
          size="small"
          :data="state.items"
          border
          stripe
          @sort-change="handleOrderChange"
        >
          <el-table-column type="index" label="No." width="50">
            <template #default="scope">
              {{ indexMethod(scope.$index, state.page, state.pageSize) }}
            </template>
          </el-table-column>
          <el-table-column label="角色名" prop="roleName" sortable />
          <el-table-column label="权限列表" prop="permission">
            <template #default="scope">
              <span v-for="(permissionKey, i) in scope.row.permissionNameArr" :key="i" class="label">
                <el-tag type="primary">{{ permissionKey }}</el-tag>
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180">
            <template #default="scope">
              <p>
                <el-button
                  type="primary"
                  @click="handleEdit(scope.$index, scope.row)"
                ><el-icon> <Edit /> </el-icon>编辑</el-button>
                <el-button
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                ><el-icon> <Delete /> </el-icon>删除</el-button>
              </p>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="toolbar">
        <el-pagination
          v-model:current-page="state.page"
          v-model:page-size="state.pageSize"
          background
          layout="total, prev, pager, next, jumper"
          :total="state.total"
          @current-change="handleCurrentChange"
        />
      </el-col>
    </el-row>
    <el-dialog v-model="state.dbFormVisible" :title="state.dbFormTitle" :close-on-click-modal="false">
      <el-form ref="dbForm" :model="state.dbForm" label-width="120px" :rules="state.dbFormRules">
        <el-form-item label="角色名" prop="roleName">
          <el-input v-model="state.dbForm.roleName" auto-complete="off" />
        </el-form-item>
        <el-form-item label="权限列表" prop="permission">
          <el-checkbox-group v-model="state.permissionList">
            <el-checkbox v-for="feature in state.menus.features" :key="feature.key" :label="feature.key">{{
              feature.name
            }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button :disabled="state.dbLoading" @click="state.dbFormVisible = false">取消</el-button>
          <el-button type="primary" :loading="state.dbLoading" @click="dbSubmit">提交</el-button>
        </div>
      </template>
    </el-dialog>
  </section>
</template>

<script setup>
import api from '@/utils/api'
import { onMounted, reactive, ref, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  toolGetList,
  indexMethod,
  toolDbSubmit,
  toolDbSuccess,
  toolDelete,
  toolOrderChange,
  toolGetMenus
} from '@/utils'
const apiDb = `/roles`
const dbForm = ref(null)
const state = reactive({
  filters: {
    roleName: ''
  },
  menus: {
    features: []
  },
  items: [],
  total: 0,
  page: 1,
  pageSize: 20,
  order: '',
  sortby: '',
  listLoading: false,
  sels: [],
  dbFormVisible: false,
  dbLoading: false,
  dbFormTitle: '',
  dbFormSubmitTitle: '',
  dbMethod: '',
  dbFormRules: {
    roleName: [{ required: true, message: '请输入角色名', trigger: 'blur' }],
    permission: [{ required: true, message: '请输入权限列表', trigger: 'blur' }]
  },
  permissionList: [],
  dbForm: {
    roleId: 0,
    roleName: '',
    permission: ''
  }
})
onMounted(async() => {
  toolGetList(state, apiDb, state.filters)
  toolGetMenus(state, apiDb)
})
const handleOrderChange = async column => {
  toolOrderChange(state, apiDb, column)
}

const handleCurrentChange = async page => {
  state.page = page
  toolGetList(state, apiDb, state.filters)
}

const handleCreate = async query => {
  state.dbFormVisible = true
  state.dbFormTitle = '新增'
  state.dbFormSubmitTitle = '提交'
  state.dbMethod = 'create'
  state.dbForm = {
    roleId: 0,
    roleName: '',
    permission: ''
  }
  state.permissionList = []
}
const handleEdit = function(index, row) {
  state.dbFormVisible = true
  state.dbFormTitle = '编辑'
  state.dbFormSubmitTitle = '提交'
  state.dbMethod = 'update'
  state.dbForm = Object.assign({}, row)
  state.permissionList = row.permission.split(',')
}

const handleDelete = async(index, row) => {
  toolDelete(state, apiDb, row.roleId)
}

const dbSubmit = async function() {
  var iPermission = state.permissionList.length
  while (iPermission--) {
    if (!state.permissionList[iPermission]) {
      state.permissionList.splice(iPermission, 1)
    }
  }
  state.dbForm.permission = state.permissionList.join(',')
  toolDbSubmit(dbForm, state.dbForm.roleId, state, apiDb, dbSuccess)
}
const dbSuccess = async function() {
  toolDbSuccess(state, apiDb)
}
</script>

<style scoped>
span.label {
  margin: 5px;
}
</style>
